<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Crafty - Gameloop mechanics</title>
	<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />

	<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' 	type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="/favicon.ico">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="/github.css"/>
	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-23935213-2']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

	</script>
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="/">Home</a></li>
						<li><a href="/getting-started/">Getting started</a></li>
						<li><a href="/documentation/">Documentation</a></li>
						<li><a href="/api/">API</a></li>
						<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
						<li><a href="/components/">Components</a></li>
						<li class="emph"><a href="/#install">Download</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id='doc-nav'>
		<ul id='doc-level-one'>
			<li>
				Topics
				<ul>
					<li>
						<a href='/documentation/'>
							Documentation
						</a>
					</li>
					<li>
						<a href='/documentation/entities.html'>
							Entities
						</a>
					</li>
					<li>
						<a href='/documentation/events.html'>
							Events
						</a>
					</li>
					<li>
						<a href='/documentation/components.html'>
							Components
						</a>
					</li>
					<li>
						<a href='/documentation/2d.html'>
							2D Graphics
						</a>
					</li>
					<li>
						<a href='/documentation/text.html'>
							Text
						</a>
					</li>
					<li>
						<a href='/documentation/keyboard.html'>
							Keyboard
						</a>
					</li>
					<li>
						<a href='/documentation/mouse.html'>
							Mouse
						</a>
					</li>
					<li>
						<a href='/documentation/sound.html'>
							Sound
						</a>
					</li>
					<li>
						<a href='/documentation/sprites.html'>
							Sprites
						</a>
					</li>
					<li>
						<a href='/documentation/scenes.html'>
							Scenes
						</a>
					</li>
					<li>
						<a href='/documentation/gameloop.html'>
							Game Loop
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id='doc-content' class="markdown">
		<span class="edit-on-github">
		  <a href="https://github.com/craftyjs/craftyjs.github.com/edit/master/source/documentation/gameloop.md">Edit on Github</a>
		</span>

		<h2> Gameloop mechanics </h2>
<p>Crafty&#39;s game loop is implemented in <a href="/api/Crafty-timer.html#Crafty-timer-step">Crafty.timer.step</a>.  It uses global events to communicate with the rest of the engine.  The basic loop is driven by <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame"><code>requestAnimationFrame</code></a> if available, and consists of the following phases:</p>
<ul>
<li>One or more calls to &quot;EnterFrame&quot; which advance the game state</li>
<li>A single call to &quot;RenderScene&quot; which triggers each layer to draw itself</li>
</ul>
<p>Everything triggered by &quot;EnterFrame&quot; will resolve before the scene is rendered -- for instance, if you move an object several times in response to a single event, only its final position will be visible.</p>
<p>There are some other events which are used for benchmarks and fine grained control, but the above two are the most important.</p>
<h2 id="enterframe">EnterFrame</h2>
<p>Functions bound to this event are passed an object with several properties, only a couple of which are typically important:</p>
<pre><code>data = {
    <span class="hljs-attr">frame</span>: frameNumber <span class="hljs-comment">// the number of frames since Crafty.init()</span>
    dt: ms <span class="hljs-comment">// the time in ms which has passed since the last "EnterFrame" event</span>
}</code></pre>
<p>All game logic, i.e. anything that changes over time, is ultimately hooked into the &quot;EnterFrame&quot; event.  Many components (such as <a href="/api/Tween.html">&quot;Tween&quot;</a>) exist to simplify this interaction, but to provide custom behavior you&#39;ll probably end up binding entities  directly to this event.  If you want to provide smooth behavior, you should use the <code>dt</code> property to determine how far the game state should advance.  As a simple example, here&#39;s a red square that will move to the right at 10 pixels per second:</p>
<pre><code>Crafty.init(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>);
<span class="hljs-keyword">var</span> square = Crafty.e(<span class="hljs-string">'2D, Canvas, Color'</span>);
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>})
  .color(<span class="hljs-string">'red'</span>)
  .bind(<span class="hljs-string">"EnterFrame"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">eventData</span>) </span>{
    <span class="hljs-comment">// Move to the right by 10 pixels per second</span>
    <span class="hljs-keyword">this</span>.x = <span class="hljs-keyword">this</span>.x + <span class="hljs-number">10</span> * (eventData.dt / <span class="hljs-number">1000</span>);
  };</code></pre>
<h2 id="renderscene">RenderScene</h2>
<p>The rendering layers like &quot;Canvas&quot; and &quot;DOM&quot; listen to this event, making sure that what&#39;s visible on the screen matches  the game state as of the last &quot;EnterFrame&quot; event.  Generally, you&#39;d never need to bind to this event yourself unless you&#39;re implementing a custom rendering layer.</p>
<h2 id="crafty-timer-steptype">Crafty.timer.steptype</h2>
<p>The <a href="/api/Crafty-timer.html#Crafty-timer-steptype">Crafty.timer.steptype</a> function lets you control the exact way &quot;EnterFrame&quot; events consume game time.  This can be a pretty complex topic; for an in-depth discussion, see Glenn Fiedler&#39;s famous <a href="http://gafferongames.com/game-physics/fix-your-timestep/">Fix Your Timestep!</a> article.</p>
<p>Crafty defaults to a fixed timestep with the possibility of using multiple &quot;EnterFrame&quot; events to combat slowdown, but this behavior is customizable.  See the method&#39;s documentation for details!</p>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="/images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="/images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="/images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="/">Home</a></li>
				<li><a href="/getting-started/">Getting started</a></li>
				<li><a href="/documentation/">Documentation</a></li>
				<li><a href="/api/">API</a></li>
				<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
				<li><a href="/components/">Modules</a></li>
				<li class="emph"><a href="/#install">Download</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
